<template>
  <view class="container">
    <!-- 如果有数据 -->
    <view v-if="product">
      <!-- 图片 -->
      <view class="thumb" v-if="product.products.thumbs_text">
        <!-- aspectFill保持缩放 -->
        <image mode="aspectFill" :src="product.products.thumbs_text" />
      </view>

      <!-- 内容 -->
      <view class="info">
        <view class="validate">
          <view class="icon">
            <image src="/static/images/validate_active.png"></image>
          </view>
          <view class="txt">
            您查询的产品是官方正品! <view>请放心使用！</view>
          </view>
        </view>

        <view class="line"></view>

        <view class="list">
          <view class="item">
            <view class="name">查询次数：</view>
            <view class="value">{{ product.query_num }}</view>
          </view>

          <view class="item">
            <view class="name">您查询的防伪码：</view>
            <view class="value">{{ product.query_code }}</view>
          </view>

          <view class="item">
            <view class="name">首次查询时间：</view>
            <view class="value">{{ product.query_time_text }}</view>
          </view>

          <view class="item">
            <view class="name">防伪码所属产品：</view>
            <view class="value">{{ product.products.name }}</view>
          </view>
        </view>

        <view class="code" v-if="product.query_qrcord">
          <image
            mode="aspectFit"
            show-menu-by-longpress
            :src="product.query_qrcord_text"
          />
        </view>

        <!--更换防伪码 按钮 判断只有本人的商品才能更换 -->
        <view class="action" v-if="business.id == product.busid">
          <u-button
            @click="show = true"
            type="success"
            text="更换防伪码"
          ></u-button>
        </view>
      </view>
    </view>

    <!-- 查询数据为空 -->
    <view v-else>
      <u-empty mode="data"></u-empty>
    </view>

    <!-- 提醒组件 -->
    <u-toast ref="notice" />

    <!--更换防伪码 模态框 -->
    <u-modal
      :show="show"
      :content="content"
      showCancelButton
      @confirm="ModalConfirm"
      @cancel="show = false"
    ></u-modal>
  </view>
</template>

<script>
export default {
  onLoad(options) {
    // 接收参数
    this.code = options.code ? options.code : "";

    // 判断有没有防伪码
    if (!this.code) {
      this.$refs.notice.show({
        type: "error",
        message: "授权码为空无法查询",
      });
      return false;
    }

    //获取本地存储
    var business = uni.getStorageSync("business")
      ? uni.getStorageSync("business")
      : {};

    // 判断对象是否为空
    if (Object.getOwnPropertyNames(business).length > 0)
      this.business = business;

    // 调用方法
    this.Info();
  },
  data() {
    return {
      code: "", //防伪码
      product: null, //商品数据
      business: {}, //用户信息
      show: false, //模态框
      content: "是否更换防伪码", //模态框的提示内容
    };
  },
  methods: {
    // 详情数据
    async Info() {
      // 发送请求
      var result = await uni.$u.http.post("/business/validator", {
        code: this.code,
      });

      if (result.code == 0) {
        // 提示信息
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }

      // 赋值
      this.product = result.data;
    },
    // 更换防伪码
    async ModalConfirm() {
      // 关闭模态框
      this.show = false;

      // 发送请求
      var result = await uni.$u.http.post("/business/generate", {
        code: this.code,
      });

      if (result.code == 0) {
        this.$refs.notice.show({
          type: "error",
          message: result.msg,
        });
        return false;
      }

      //替换数据
      this.product = result.data;
    },
  },
};
</script>

<style>
page {
  background-color: #eee;
  padding-bottom: 10px;
}

.container {
  width: 95%;
  margin: 0 auto;
}

.thumb {
  width: 100%;
  height: 280px;
  border-radius: 10px;
  overflow: hidden;
}

.thumb image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.info {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
  padding: 0 10px 10px;
}

.info .validate {
  display: flex;
  align-items: center;
  padding: 10px 0 10px 10px;
}

.info .validate image {
  width: 50px;
  height: 50px;
  margin-right: 10px;
}

.info .validate .txt {
  font-size: 14px;
}

.info .validate .txt view {
  font-size: 12px;
  color: #9b9b9a;
  margin-top: 5px;
}

.info .line {
  width: 100%;
  height: 1px;
  background: #ebebeb;
  margin: 0 auto;
  margin-bottom: 10px;
}

.info .list .item {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
}

.info .list .item .name {
  color: #9b9b9a;
}

.info .code {
  width: 100%;
  height: 280px;
}

.info .code image {
  width: 100%;
  height: 100%;
}

/* 更换防伪码按钮 */
.action {
  width: 40%;
  margin: 0 auto;
  margin-top: 10px;
}
</style>
